<script>
export default {
  name: "iconTitle",
  props: {
    icon: {
      type: String,
      default: "video-share"
    },
    width: {
      type: Number,
      default: 58
    },
    height: {
      type: Number,
      default: 58
    },
    title: {
      type: String,
      default: ""
    },
    isManager: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick() {
      this.$emit("click")
    }
  },
  render() {
    const icon = require(`../../../../../../src/assets/images/ga/${this.icon}.png`)
    return <div class="icon-title-comp">
      <div class="icon">
        {

          // <div class="inner-icon" style={{background: `url(${icon})`, 'background-size': '100%'}}></div>
          <img src={icon} class="inner-icon" width={this.width} height={this.height} on-click={this.handleClick}/>
        }
        { this.isManager ? <i class="el-icon-setting" on-click={this.handleClick}/> : '' }
      </div>
      <div class="icon-title" on-click={this.handleClick}>{this.title}</div>
    </div>
  }
}
</script>

<style lang="scss">
.icon-title-comp {
  box-sizing: border-box;
  display: inline-block;
  height: 185px;
  width: 50%;
  .icon {
    width: 98px;
    height: 98px;
    margin: 0 auto;
    background: rgba(12, 121, 255, 0.1);
    border-radius: 50%;
    align-self: center;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    .el-icon-setting {
      font-size: 22px;
      color: #198fff;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .icon-title {
    width: 240px;
    margin: 22px auto 0;
    font-size: 24px;
    font-family: SourceHanSansCN Regular, SourceHanSansCN Regular-Regular;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
    line-height: 30px;
    align-self: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
  }
}
</style>
